{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}
<title>个人资料</title>
<style type="text/css">
    .mui-content{ padding-bottom: 50px;}
    .mui-grid-view.mui-grid-9:before{height: 1px;}
    .head-img{ width: 40px; height: 40px; border-radius: 50%; position: absolute;bottom: 8px; right: 40px;}
    .mui-table-view span.mui-badge{ color: #999; font-size: 16px;}
</style>
{% endblock %}

{# bodyd代码#}
{% block body %}
<div class="mui-content">
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        <a id="head" class="mui-navigate-right">头像
                            <span class="mui-pull-right head">
										<img class="head-img mui-action-preview" id="head-img1" src="{{ctx.app.config.api.image}}/{{data.headImage}}"/>
									</span>
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right" onclick="location.href='javascript:void(0);'">姓名<span class="mui-badge">{{data.name}}</span></a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="javascript:void(0);" class="mui-navigate-right">性别<span class="mui-badge">
                            {%if data.sex==1%}
                                男
                            {%elif data.sex==2%}
                                女
                            {%else%}
                                未知
                            {%endif%}
                        </span></a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right" onclick="location.href='editphone'">账号电话<span class="mui-badge">{{data.mobile}}</span></a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="edit.html" class="mui-navigate-right">所在地址<span class="mui-badge">{{data.currentAddress}}</span></a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="edit.html" class="mui-navigate-right">任教阶段<span class="mui-badge">初中</span></a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="edit.html" class="mui-navigate-right">任教科目<span class="mui-badge">语文</span></a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="edit.html" class="mui-navigate-right">任教学校<span class="mui-badge">贵阳一中</span></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{#js代码#}
{% block js %}
<script type="text/javascript" charset="utf-8">
    //更换头像
    mui(".mui-table-view-cell").on("tap", "#head", function(e) {
        if(mui.os.plus){
            var a = [{
                title: "拍照"
            }, {
                title: "从手机相册选择"
            }];
            plus.nativeUI.actionSheet({
                title: "修改头像",
                cancel: "取消",
                buttons: a
            }, function(b) {
                switch (b.index) {
                    case 0:
                        break;
                    case 1:
                        getImage();
                        break;
                    case 2:
                        galleryImg();
                        break;
                    default:
                        break
                }
            })
        }

    });

    function getImage() {
        var c = plus.camera.getCamera();
        c.captureImage(function(e) {
            plus.io.resolveLocalFileSystemURL(e, function(entry) {
                var s = entry.toLocalURL() + "?version=" + new Date().getTime();
                console.log(s);
                document.getElementById("head-img").src = s;
                document.getElementById("head-img1").src = s;
                //变更大图预览的src
                //目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
                document.querySelector("#__mui-imageview__group .mui-slider-item img").src = s + "?version=" + new Date().getTime();;;
            }, function(e) {
                console.log("读取拍照文件错误：" + e.message);
            });
        }, function(s) {
            console.log("error" + s);
        }, {
            filename: "_doc/head.jpg"
        })
    }

    function galleryImg() {
        plus.gallery.pick(function(a) {
            plus.io.resolveLocalFileSystemURL(a, function(entry) {
                plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
                    root.getFile("head.jpg", {}, function(file) {
                        //文件已存在
                        file.remove(function() {
                            console.log("file remove success");
                            entry.copyTo(root, 'head.jpg', function(e) {
                                    var e = e.fullPath + "?version=" + new Date().getTime();
                                    document.getElementById("head-img").src = e;
                                    document.getElementById("head-img1").src = e;
                                    //变更大图预览的src
                                    //目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
                                    document.querySelector("#__mui-imageview__group .mui-slider-item img").src = e + "?version=" + new Date().getTime();;
                                },
                                function(e) {
                                    console.log('copy image fail:' + e.message);
                                });
                        }, function() {
                            console.log("delete image fail:" + e.message);
                        });
                    }, function() {
                        //文件不存在
                        entry.copyTo(root, 'head.jpg', function(e) {
                                var path = e.fullPath + "?version=" + new Date().getTime();
                                document.getElementById("head-img").src = path;
                                document.getElementById("head-img1").src = path;
                                //变更大图预览的src
                                //目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
                                document.querySelector("#__mui-imageview__group .mui-slider-item img").src = path;
                            },
                            function(e) {
                                console.log('copy image fail:' + e.message);
                            });
                    });
                }, function(e) {
                    console.log("get _www folder fail");
                })
            }, function(e) {
                console.log("读取拍照文件错误：" + e.message);
            });
        }, function(a) {}, {
            filter: "image"
        })
    };

    function defaultImg() {
        if(mui.os.plus){
            plus.io.resolveLocalFileSystemURL("_doc/head.jpg", function(entry) {
                var s = entry.fullPath + "?version=" + new Date().getTime();;
                document.getElementById("head-img").src = s;
                document.getElementById("head-img1").src = s;
            }, function(e) {
                document.getElementById("head-img").src = 'images/logo.png';
                document.getElementById("head-img1").src = 'images/logo.png';
            })
        }else{
            document.getElementById("head-img").src = 'images/logo.png';
            document.getElementById("head-img1").src = 'images/logo.png';
        }

    }
    document.getElementById("head-img1").addEventListener('tap', function(e) {
        e.stopPropagation();
    });
</script>
<!--flotdemo-->
{% endblock %}
